<template>
    <div>

    <section class="chart-container">
        <el-row style="margin-top: 20px">
            <div class="welinfo">
                <span><img src="http://demo.cssmoban.com/cssthemes4/zwtp_2_gi/images/sun.png" alt="天气"/></span>
                <b>Admin，欢迎使用诚购优品后台管理平台</b>
            </div>

            <div class="welinfo">
                <span><img src="http://demo.cssmoban.com/cssthemes4/zwtp_2_gi/images/time.png" alt="时间"/></span>
                <i>您上次登录的时间：2018-10-10 15:22</i>
            </div>

            <div class="xline"></div>

        </el-row>

        <el-row>
            <el-col :span="12">
                <div id="chartLine" style="width:100%; height:400px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="chartPie" style="width:100%; height:400px;"></div>
            </el-col>
        </el-row>
    </section>
        <span>有什么消息要发吗？</span>
        <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="textarea">
        </el-input>

        <el-button type="primary"  @click="sendAll">发送消息</el-button>
    </div>


</template>

<script>
    import echarts from 'echarts'

    export default {
        data() {
            return {
                textarea:"",
                chartColumn: null,
                chartBar: null,
                chartLine: null,
                chartPie: null
            }
        },
        methods: {
            sendAll(){
              // console.log(this.textarea)/websocket/sendAllWebSocket?text=清仓大甩卖
            this.service.get("/websocket/sendAllWebSocket",{
                params:{
                    text:this.textarea
                }
            }).then(function (res){
            })

            },
            initWebSocket () {
                // 连接错误
                this.websocket.onerror = this.setErrorMessage

                // 连接成功
                this.websocket.onopen = this.setOnopenMessage

                // 收到消息的回调
                this.websocket.onmessage = this.setOnmessageMessage

                // 连接关闭的回调
                this.websocket.onclose = this.setOncloseMessage

                // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                window.onbeforeunload = this.onbeforeunload
            },
                setErrorMessage () {
                console.log('WebSocket连接发生错误   状态码：' + this.websocket.readyState)
            },
            setOnopenMessage () {
                console.log('WebSocket连接成功    状态码：' + this.websocket.readyState)
            },
            setOnmessageMessage (event) {
                // 根据服务器推送的消息做自己的业务处理
                this.$notify({
                    title: '提醒发货',
                    message: event.data,
                    type: 'warning'
                });
            },
            setOncloseMessage () {
                console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState)
            },
            onbeforeunload () {
                this.closeWebSocket()
            },
            closeWebSocket () {
                this.websocket.close()
            },

            drawLineChart() {
                this.chartLine = echarts.init(document.getElementById('chartLine'));
                this.chartLine.setOption({
                    title: {
                        text: '您的店铺用户活跃度 ',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['用户活跃度']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '用户活跃度',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        }
                    ],
                    color:['#72bff3']
                });
            },
            drawPieChart() {
                this.chartPie = echarts.init(document.getElementById('chartPie'));
                this.chartPie.setOption({
                    title: {
                        text: '热度排行榜',
                        subtext: '截止2018-10-10',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['电脑', '小米', '三星', '摩托罗拉', '华为']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 335, name: '电脑'},
                                {value: 310, name: '小米'},
                                {value: 234, name: '三星'},
                                {value: 135, name: '摩托罗拉'},
                                {value: 1548, name: '华为'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ],
                    color:['#72bff3','#33ff2e', '#44ff5c', '#31cbff','#ff8687','#33332e','#72a0ff']
                });
            },
            drawCharts() {
                this.drawLineChart()
                this.drawPieChart()
            },
        },

        mounted: function () {
            let user = JSON.parse(sessionStorage.getItem('user'));
            if ('WebSocket' in window) {
                this.websocket = new WebSocket('ws://localhost:8080/websocket/'+user.username)
                this.initWebSocket()
            } else {
                alert('当前浏览器 Not support websocket')
            }


            this.drawCharts()
        },
        updated: function () {
            this.drawCharts()
        }
    }
</script>

<style scoped>
    /*index*/
    .welinfo {
        height: 32px;
        padding-bottom: 8px;
    }

    .welinfo span {
        float: left;
    }

    .welinfo b {
        padding-left: 8px;
        line-height: 32px;
    }

    .welinfo a {
        padding-left: 15px;
        color: #3186c8;
    }

    .welinfo a:hover {
        color: #F60;
    }

    .welinfo i {
        font-style: normal;
        padding-left: 8px;
        line-height: 32px;
    }

    .xline{border-bottom:solid 1px #dfe9ee; height:5px;}

    .chart-container {
        width: 100%;
        float: left;
    }

    /*.chart div {
        height: 400px;
        float: left;
    }*/

    .el-col {
        padding: 30px 20px;
    }
</style>
